<template>
  <div class="cletitle">
    <router-view />
    <van-nav-bar title="个人资料设置" left-text left-arrow />
    <div class="left">
      <van-image
        class="images"
        width="50"
        height="50"
        round
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <span>未设置</span>
    </div>
    <van-cell title="账户名称" is-link value="Superme233" />
    <van-cell title="个性昵称" is-link value="未设置"  :to="{ name: 'nickname' }"/>
    <van-cell title="手机号码" is-link value="未设置"  :to="{name:'phone'}" />
    <van-cell 
    title="出生日期" 
    is-link 
    value="未设置" 
    @click="showri"
    />
    
    <van-popup v-model="srshow" position="bottom" :style="{ height: '30%' }">
              <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
    </van-popup>

    <van-cell title="电子邮箱" is-link value="未设置"  :to="{name:'email'}" />

    <van-cell
      title="语言设置"
      is-link
      @click="showPopup"
      class="language"
      value="中文简体"
    ></van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-picker title="选择语言" show-toolbar :columns="columns" />
    </van-popup>

  </div>
</template>
<script>
export default {
  name: "Personal",
  data() {
    return {
      columns: ["中文简体", "中文繁体", "英语", "日语", "法语", "德语", "俄语"],
      show: false, //语言弹窗
      srshow:false,  //生日弹窗
      // 出生年月
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    showri() {
      this.srshow=true
    }
  },
};
</script>

<style lang="less" scoped>
.cletitle {
  background-color: #f0f0f0;
  height: 1800px;
}
body {
  color: #f0f0f0;
}
.left {
  border-bottom: 1px solid #ebebeb;
  background-color: white;
  display: flex;
  align-content: center;

  .images {
    margin-left: 23px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  span {
    font-size: 14px;
    color: #5c5d60;
    margin-left: 20px;
    margin-top: 25px;
  }
}
.language {
  margin-top: 20px;
}
</style>
